<template>
  <div class="">
    <a-row>
      <a-col :span="24">
        <a-button type="primary" @click="addStep">添加检查步骤</a-button>
      </a-col>
      <a-col :span="24">
        <div v-if="!isShowLists"><a-empty description="请先添加步骤流程" /></div>
        <a-steps v-if="isShowLists" v-model="currentStep" type="navigation" :style="stepStyle" @change="stepHandle">
          <a-step v-for="(item, index) in stepLists" :key="index">
            <template slot="title">
              <div class="titleBox">
                <span>{{ item.title }}</span>
                <span class="close" @click="delStep(item, index)"><a-icon type="delete" /></span>
              </div>
            </template>
          </a-step>
        </a-steps>
      </a-col>
    </a-row>
    <AddStepDialog
      :openDialog.sync="isDialogOpen"
      title="新增检查步骤"
      @confirmRefreshData="getAddStep"
    ></AddStepDialog>
  </div>
</template>

<script>
// import api from '@/api/API';
import { getRoleId } from '@/unit/tool';
import AddStepDialog from './components/addStepDialog';

function getCurrentStepFunc(lists, currentStep) {
  return lists.find((item, index) => index == currentStep);
}

export default {
  name: 'assembleTemplateNew',
  components: {
    AddStepDialog,
  },
  model: {
    prop: 'currentStepObj',
    event: 'getCurrentStep',
  },
  props: {
    currentStepObj: Object,
  },
  data() {
    return {
      userName: '',
      name: '',
      role: '',
      compId: '',
      isDialogOpen: false,
      currentStep: 0,
      stepLists: [],
      stepStyle: {
        marginBottom: '60px',
        boxShadow: '0px -1px 0 0 #e8e8e8 inset',
      },
    };
  },
  computed: {
    isShowLists: function() {
      return this.stepLists.length > 0 ? true : false;
    },
  },
  watch: {},
  methods: {
    addStep() {
      this.isDialogOpen = true;
      // let length = this.stepLists.length;
      // this.stepLists = [...this.stepLists, { title: `步骤  ${length + 1}` }];
    },
    // delStep() {
    //   if (this.currentStep == 0) {
    //     this.$message.error(`不能删除初始步骤`);
    //     return;
    //   }
    //   this.stepLists = this.stepLists.filter((item, index) => index != this.currentStep);
    // },

    delStep(item, index) {
      // let lists = [];
      // if (index == 0) {
      //   this.$message.error(`不能删除初始步骤`);
      //   return;
      // }
      // lists = this.stepLists.filter((item, i) => i != index);
      // this.stepLists = lists.map((ite, index) => {
      //   return { title: `步骤  ${index + 1}` };
      // });
    },
    stepHandle(current) {
      console.log(current);
      console.log(getCurrentStepFunc(this.stepLists, this.currentStep));
      this.$emit('getCurrentStep', getCurrentStepFunc(this.stepLists, this.currentStep));
    },
    getAddStep(obj) {
      let { stepId } = obj;
      let { title } = obj;
      let length = this.stepLists.length;
      this.stepLists = [...this.stepLists, { stepId, title: title }];
      this.$emit('getCurrentStep', getCurrentStepFunc(this.stepLists, this.currentStep));
    },
  },
  mounted() {},
  created() {
    getRoleId(this);
  },
};
</script>

<style scoped="scoped" lang="less">
.titleBox {
  width: 100px;
}

.titleBox .close {
  float: right;
}

.titleBox .close:hover {
  color: #1890ff;
  cursor: pointer;
}
</style>
